<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-popover="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>睿云 让生活更美好！</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">修改账号</h1>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>系统<span>/</span>员工列表</div>
        </div><!-- 页面头部 end -->

        <div class="main-content-body">
            <div class="edit-form">
                <el-form :model="manager" :rules="rules" ref="manager-form" label-width="100px" class="demo-ruleForm">
                    <h3 class="edit-form-title">账号信息</h3>
                    <el-form-item label="登录账号" prop="loginName">
                        <el-input v-model="manager.loginName" placeholder="只能包括英文字母、数字，支持 Email"></el-input>
                        <el-button type="warning" size="mini" @click="manager.resetPassword = !manager.resetPassword">重置密码</el-button>
                    </el-form-item>
                    <el-collapse-transition>
                        <div v-show="manager.resetPassword">
                            <el-form-item label="密码" prop="password">
                                <el-input v-model="password"></el-input>
                                <el-popover
                                        ref="popoverqsur"
                                        placement="bottom-start"
                                        width="440"
                                        trigger="hover">
                                    <p class="z-jiao">重置管理员登录密码为初始密码，可修改为其他密码。</p>
                                </el-popover>
                                <i v-popover:popoverqsur class="el-icon-question"></i>
                            </el-form-item>
                        </div>
                    </el-collapse-transition>
                    <el-form-item label="身份">
                        <el-radio-group v-model="manager.identity">
                            <el-radio v-for="identity in identityList" :key="identity.value"
                                      :label="identity.value">{{identity.name}}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="manager.name"></el-input>
                    </el-form-item>
                    <el-form-item label="职位">
                        <el-input v-model="manager.position"></el-input>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-select v-model="manager.deptName" placeholder="请选择部门">
                            <el-option :value="manager.deptName" style="height: auto; padding: 0;">
                                <el-tree :data="deptTree" ref="dept-tree" node-key="uuid" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="manager.description" placeholder="填写相关备注信息" :rows="3"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="manager.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="manager.email"></el-input>
                    </el-form-item>
                    <el-form-item label="QQ">
                        <el-input v-model="manager.qq"></el-input>
                    </el-form-item>
                    <h3 class="edit-form-title">权限范围</h3>
                    <el-form-item label="数据权限">
                        <template slot="label">
                            <el-popover
                                    ref="popoverqsu"
                                    placement="bottom-start"
                                    width="440"
                                    trigger="hover">
                                <p class="z-jiao">数据权限：此账号可以看到那些客户的订单销售数据，资金数据，报表数据；比如：某个业务员人员，只能看到他负责地区的客户订单</p>
                            </el-popover>
                            <i v-popover:popoverqsu class="el-icon-question"></i>
                            数据权限
                        </template>
                        <el-radio-group v-model="radio">
                            <el-radio :label="1">全部区域</el-radio>
                            <el-radio :label="2">部分区域</el-radio>
                            <a href="javascript:;" class="z-customerArea" :class="{show: showChioceArea}" @click="showDailog">+选择客户区域范围</a>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="角色权限" prop="authRole">
                        <el-checkbox-group v-model="roleCheckedList" @change="handleRoleCheckedChange" v-cloak>
                            <el-checkbox v-for="role in roleList" :key="role.uuid" :label="role.uuid">{{role.name}}</el-checkbox>
                        </el-checkbox-group>
                        <div class="z-box-info">
                            <p>注意请勾选此账号属于的【角色权限】，对应的【权限明显】即可选中；</p>
                            <p>如果您还未设置过【角色权限】，请先 <a href="/backstage/permission/role/tolist">设置角色</a>，比如：仓库管理员、财务管理员、业务管理员</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="权限明细" class="authinfo-item">
                        <div class="band-ipt z-power-list">
                            <div class="z-yuan-item" v-for="firstMenu in menuTree" :key="firstMenu.uuid">
                                <span class="z-yuan-tit"><i class="el-icon-check" :class="{on: firstMenu.checked}"></i>{{firstMenu.name}}</span>
                                <div class="o_f">
                                    <div class="clearfix" v-for="secondMenu in firstMenu.childrens" :key="secondMenu.uuid">
                                        <template v-if="secondMenu.permissionList != null">
                                            <span class="z-yuan-tit"><i class="el-icon-check" :class="{on: secondMenu.checked}"></i>{{secondMenu.name}}</span>
                                            <div class="z-yuan-content z-yuan-content2">
                                                <ol>
                                                    <li v-for="permission in secondMenu.permissionList" :key="permission.uuid"><i class="el-icon-check" :class="{on: permission.checked}"></i>{{permission.name}}</li>
                                                </ol>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <span class="z-yuan-tit"><i class="el-icon-check" :class="{on: secondMenu.checked}"></i>{{secondMenu.name}}</span>
                                            <div class="o_f">
                                                <div class="clearfix" v-for="thirdMenu in secondMenu.childrens" :key="thirdMenu.uuid">
                                                    <span class="z-yuan-tit"><i class="el-icon-check" :class="{on: thirdMenu.checked}"></i>{{thirdMenu.name}}</span>
                                                    <div v-if="thirdMenu.permissionList != null" class="z-yuan-content">
                                                        <ol>
                                                            <li v-for="permission in thirdMenu.permissionList" :key="permission.uuid"><i class="el-icon-check" :class="{on: permission.checked}"></i>{{permission.name}}</li>
                                                        </ol>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                    <div class="edit-button-fixed">
                        <div class="edit-button z-yuan-butn">
                            <el-button type="primary" @click="handleSave">确定</el-button>
                            <el-button @click="handleCancel">返回</el-button>
                        </div>
                    </div>
                </el-form>
                <!-- 选择区域模态框 -->
                <el-dialog title="选择客户区域范围" :visible.sync="dialogFormVisible">
                    <el-form :model="areaform">
                        <el-form-item>
                            <el-checkbox-group v-model="areacheckList">
                                <el-checkbox :label="1">默认地区</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
                        <el-button @click="dialogConfirm">取 消</el-button>
                    </div>
                </el-dialog>
                <!-- 选择区域模态框 end -->
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
            loading: false,
            identityList: [{"name": "内勤", "value": "1"}, {"name": "业务员", "value": "2"}, {"name": "老板", "value": "3"}, {"name": "司机", "value": "4"}],
            manager: [[${dto}]],
            roleList: [[${roleList}]],
            menuTree: [[${menuTree}]],
            radio: 1,
            showChioceArea: false,
            deptTree: [[${deptTree}]],
            roleCheckedList: [],
            permissionCheckedList: [],
            areaform: {},
            areacheckList: [],
            password: '111111',
            resetPassword: false,
            rules: {
                loginName: [
                    {required: true, message: "请输入登录账户", trigger: 'blur'},
                    {min:2, max:20, message: '密码长度2到20个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: "请输入登录密码", trigger: 'blur'},
                ],
                name: [
                    {required: true, message: "请输入姓名", trigger: 'blur'},
                    {max:20, message: '姓名最长20个字符', trigger: 'blur'}
                ],
                mobile: [
                    {required: true, message: "请输入手机号", trigger: 'blur'},
                    {pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/, message: '手机号格式有误', trigger: 'blur'}
                ],
                email: [
                    {pattern: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, message: '邮箱格式有误', trigger: 'blur'}
                ]
            },
            defaultProps: {
                id: 'uuid',
                label: 'name',
                children: 'childrens'
            },
            dialogFormVisible: false,
        },
        created: function () {
            // 初始化角色、菜单和权限选中状态数据
            for (let role of this.manager.roleList) {
                this.roleCheckedList.push(role.uuid);
                let roleObj = this.roleList.find(item => item.uuid === role.uuid);
                for (let menu of this.menuTree) {
                    initMenuAndPermission(menu);
                    checkMenuAndPermission(menu, roleObj);
                }
            }
        },
        watch: {
            'radio': function () {
                this.showChioceArea = this.radio === 2;
            }
        },
        methods: {
            dislogHide: function () {
                this.dialogFormVisible = false;
            },
            showDailog: function () {
                this.dialogFormVisible = true;
            },
            identityFormatter: function (value) {
                for (let identity of this.identityList) {
                    if (identity.value === value) {
                        return identity.name;
                    }
                }
                return "暂未设置";
            },
            handleRoleCheckedChange: function (value) {
                for (let menu of this.menuTree) {
                    initMenuAndPermission(menu);
                }
                let roles = [];
                for (let val of value) {
                    roles.push({uuid: val});
                    let roleObj = this.roleList.find(item => item.uuid === val);
                    for (let menu of this.menuTree) {
                        checkMenuAndPermission(menu, roleObj)
                    }
                }
                this.manager.roleList = roles;
            },
            handleNodeClick: function (data) {
                this.manager.deptName = data.name;
                this.manager.deptId = data.uuid;
            },
            dialogConfirm: function () {
                this.dialogFormVisible = false;
            },
            dialogCancel: function () {
                this.dialogFormVisible = false;
            },
            handleSave: function () {
                let self = this;
                if (self.manager.resetPassword) {
                    self.manager.password = self.password;
                }
                self.$refs['manager-form'].validate((valid) => {
                    if (valid) {
                        self.loading = true;
                        $.ajax({
                            url: "/backstage/permission/manager/edit",
                            type: "POST",
                            data: JSON.stringify(self.manager),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                self.loading = false;
                                if (data) {
                                    if (data.returnCode === 1) {
                                        self.$message({
                                            message: '编辑管理员信息成功',
                                            type: 'success',
                                            customClass: 'message-center',
                                            duration: 1500,
                                            onClose: function () {
                                                window.location.href = "/backstage/permission/manager/tolist"
                                            }
                                        });
                                    } else {
                                        self.$message({
                                            message: data.returnNote,
                                            type: 'error',
                                            customClass: 'message-center',
                                            showClose: true,
                                            duration: 3000,
                                        });
                                    }
                                } else {
                                    self.$message({
                                        message: '编辑管理员信息失败',
                                        type: 'error',
                                        customClass: 'message-center',
                                        duration: 1500,
                                    });
                                }
                            },
                            error: function () {
                                self.loading = false;
                                self.$message({
                                    message: '出错了，请请稍后再试或联系管理员.',
                                    type: 'error',
                                    customClass: 'message-center',
                                    duration: 1500,
                                });
                            }
                        });
                    }
                });
            },
            handleCancel: function () {
                window.location.href = "/backstage/permission/manager/tolist"
            }
        },
        mounted: function () {
            let node = this.$refs['dept-tree'].getNode(this.manager.deptId);
            if (node) {
                this.handleNodeClick(node.data);
            }
        }
    });

    function initMenuAndPermission(menu) {
        Vue.set(menu, 'checked', false);
        if (menu.permissionList) {
            for (let permission of menu.permissionList) {
                Vue.set(permission, 'checked', false);
            }
        }
        for (let child of menu.childrens) {
            initMenuAndPermission(child)
        }
    }

    function checkMenuAndPermission(menu, roleObj) {
        if (roleObj.menuList && roleObj.menuList.find(item => item.uuid === menu.uuid)) {
            menu.checked = true;
        }
        if (menu.permissionList) {
            for (let permission of menu.permissionList) {
                if (roleObj.permissionList.find(item => item.uuid === permission.uuid)) {
                    permission.checked = true;
                }
            }
        }
        for (let child of menu.childrens) {
            checkMenuAndPermission(child, roleObj)
        }
    }
</script>
</html>